<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('../fonts/icomoon.eot?m870tm');
            src: url('../fonts/icomoon.eot?m870tm#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?m870tm') format('truetype'), url('../fonts/icomoon.woff?m870tm') format('woff'), url('../fonts/icomoon.svg?m870tm#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
    </style>
</head>

<body>
    <!-- 导航栏代码 -->
    <div class="navigation">
        <div class="navi-one">
            <div class="question">?</div>
            <span>问卷调查</span>
        </div>
        <span class="navi-two">我的问卷</span>
    </div>

    <!-- 新建问卷代码 -->
    <main class="construct" >
        <div class="construct-one">+&nbsp;&nbsp;新建问卷</div>
    </main>

    <!-- 发布提示框代码 -->
    <div class="tips" id="pub-tips" style="display: none;">
        <div>
            <p>
                <span>提示</span>
                <span id="pub-tu"></span>
            </p> 
            <p>是否发布问卷?</p>
            <p id="time">(此问卷截止日期为2016-04-22)</p>
            <div class="button">
                <button class="checked" id="pub-confirm">确定</button>
                <button id="pub-cancel">取消</button>
            </div>
        </div>
    </div>

    <!-- 问卷编辑代码 -->
    <main class="editor" >
        <!-- 顶部 -->
        <div class="editor-header">
            <input type="text" id="title" placeholder="点击编辑标题">
        </div>
        
        <!-- 中间 -->
        <div class="editor-add-option" style="display: flex;">
            <div class="one"><span></span> 单选</div>
            <div class="two"><span></span> 多选</div>
            <div class="three"><span></span>文本题</div>
        </div>
        <div class="editor-add">+&nbsp;&nbsp;添加问题</div>
        <!-- 底部 -->
        <div class="editor-footer">
            <div class="editor-footer-left">
                <span>问卷截止日期</span>
                <input type="date" id="date">
            </div>
            <div class="editor-footer-right">
                <p class="save">保存问卷</p>
                <p class="pub">发布问卷</p>
            </div>
        </div>
    </main>

   
    <!-- 删除提示框 -->
    <div class="tips" id="del-tips" style="display: none;">
        <div>
            <p>
                <span>提示</span>
                <span id="del-tu"></span>
            </p>
            <p>是否删除此问卷?</p>
            <div class="button">
                <button class="checked" id="del-confirm">确定</button>
                <button id="del-cancel">取消</button>
            </div>
        </div>
    </div>


    <!-- 列表页代码 -->
    <main class="tab" >
        <div class="tab-header">
            <span>标题</span>
            <span>时间</span>
            <span>状态</span>
            <span>操作</span>
            <span class="tab-add checked">+&nbsp;&nbsp;新建问卷</span>
        </div>
        <div class="tab-footer">
            <input type="checkbox" id="selectAll">
            <span>全选</span>
            <div id="allDel">删除</div>
        </div>
    </main> 

    <!-- 数据页代码 -->
    <main class="record" >
        <div class="header">
            <p>这里是标题</p>
            <p>此统计分析只包含完整回收的数据</p>
        </div>
        <div class="record-item">
            <div class="word">
                <p>Q1 单选题</p>
                <p class="option">选项一</p>
                <p class="option">选项二</p>
            </div>
            <section class="ans-data">
                <h4>数据占比</h4>
                <p class="outerBar" >
                    <span class="innerBar1" ></span>
                    <span class="scaleNum"></span>
                </p>
                <p class="outerBar">
                  <span class="innerBar2" ></span>
                  <span class="scaleNum"></span>
                </p>
                <p class="echart" v-else></p>
            </section>
            
        </div>
        <div class="chart" id="radio1">
        </div>
        <div class="record-item">
            <div class="word">
                <p>Q2 多选题</p>
                <p class="option">选项一</p>
                <p class="option">选项二</p>
                <p class="option">选项三</p>
                <p class="option">选项四</p>
            </div>
            <div class="chart" id="radio2">
            </div>
        </div>
        <div class="chart" id="radio3"></div>
        <div class="record-item">
            <div class="word">
                <p>Q3 文本题</p>
                <p>有效回答</p>
            </div>
            <section class="ans-data">
                <h4>数据占比</h4>
                <p class="outerBar" >
                    <span class="innerBar1" ></span>
                    <span class="scaleNum"></span>
                </p>
            
            </section>
            </div>
        </div>
        <div class="footer">
            <p class="checked" id="return">返回</p>
        </div>
    </main>


    <script type="module" src="./lib/jquery.js"></script>
    <script type="module" src="./js/echarts.min.js"></script>
    <script type="module" src="./js/index.js"></script>
</body>

</html>